<template>
  <div>
    <TableList
      ref="TableList"
      :model-value="searchFormData"
      request-url="system/apply/list"
      request-method="get"
      :table-data="tableData"
      :table-column="tableColumn"
      :header-btn-show="false"
      :custom-request="true"
      :data="tableData"
      :table-loading="loading"
      @requestParams="listRequest"
    >

      <template #search>
        <el-form-item label="节点筛选" prop="examineOrder">
          <el-select v-model="searchFormData.examineOrder" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in configOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <template #file="{item, row}">
        <div style="display: flex; flex-wrap: wrap;">
          <el-button v-if="row.examineOrder >= 2" type="text" size="mini" @click="onShowModal('jinjianShow', row)">查看进件信息</el-button>
          <div>
            <el-button v-if="row.examineOrder >= 4" type="text" size="mini" @click="onShowModal('backModal', row)">绑定银行卡信息</el-button>
          </div>
          <div>
            <el-button v-if="row.examineOrder >= 5" type="text" size="mini" @click="onShowModal('contractModal',row)">合同信息</el-button>
          </div>
          <div>
            <el-button v-if="row.examineOrder >= 8" type="text" size="mini" @click="onShowModal('moneyModal',row)">请款审核信息</el-button>
          </div>
        </div>
      </template>

      <!-- 自定义operate 列 -->
      <template #operate="{ item, row }">
        <div>
          <el-button type="text" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" size="mini" @click="cheekInfo(row)">节点审核</el-button>
          <el-button type="text" size="mini" @click="onShowModal('logShow',row)">审核日志</el-button>
        </div>
      </template>

      <!-- 审批进度 -->
      <template #approvalNode="{ item, row }">
        <div>
          <div style="color: #409EFF;">{{ row[item] }}</div>
        </div>
      </template>

      <!-- 身份证照片 -->
      <template #idCardImges="{ item, row }">
        <div class="demo-image__preview" style="display: flex; gap: 10px;">
          <el-image
            v-for="(it, index) in row['idCardPhoto']"
            :key="index"
            style="width: 50px; height: 50px"
            :src="it"
            :preview-src-list="[row['idCardPhoto']]"
          />
        </div>
      </template>
      <!-- 行驶证照片 -->
      <template #drivingImages="{ item, row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
        </div>
      </template>

    </TableList>
    <!-- 编辑弹窗 -->
    <Form
      :drawer="drawer"
      :default-value="detailValue"
      :product-list="productList"
      @add-success="addSuccess"
      @close:drawer="drawer=false"
    />
    <!-- 审核弹窗 -->
    <CheckInfo
      :visible="checkInfoModal"
      :default-value="chooseItem"
      @close:drawer="checkInfoModal=false"
      @add-success="addSuccess"
    />
    <!-- 审核日志 -->
    <Logs
      :visible="logShow"
      :data="curItem"
      @handleClose="modelClose('logShow')"
    />

    <jinjianCheck
      :id="curItem.id"
      :cur-item="curItem"
      :visible="jinjianShow"
      @handleClose="modelClose('jinjianShow')"
    />
    <!-- 查看银行卡信息 -->
    <BackModal
      :id="curItem.id"
      :cur-item="curItem"
      :visible="backModal"
      @handleClose="modelClose('backModal')"
    />

    <contractModal
      :id="curItem.id"
      :cur-item="curItem"
      :visible="contractModal"
      @add-success="modelClose('contractModal')"
      @handleClose="modelClose('contractModal')"
    />
    <moneyModal
      :id="curItem.id"
      :cur-item="curItem"
      :visible="moneyModal"
      @add-success="modelClose('moneyModal')"
      @handleClose="modelClose('moneyModal')"
    />

  </div>
</template>

<script>
import TableList from '@/components/TableList'
import CheckInfo from './checkInfo.vue'
import jinjianCheck from './jinjianCheck.vue'
import BackModal from './BackModal.vue'
import contractModal from './contractModal.vue'
import moneyModal from './moenyModal.vue'
import Logs from './Logs.vue'
import Form from './form'
import { myMixin } from './data.js'
import request from '@/utils/request'

export default {
  components: {
    TableList,
    Form,
    CheckInfo,
    Logs,
    jinjianCheck,
    BackModal,
    contractModal,
    moneyModal
  },
  mixins: [myMixin],
  data() {
    return {
      // 编辑弹窗
      drawer: false,
      searchFormData: {},
      detailValue: {},
      // 审核弹窗
      checkInfoModal: false,
      // 审核弹窗的from
      checkInfoForm: {},
      // 自定义的table 数据
      tableData: [],
      /** 产品列表 */
      productList: [],
      /** 点击每个数据后，把每行 的数据存入这个变量 */
      chooseItem: {},
      /** 审批配置的接口数据 */
      configList: [],
      /** 审批配置的下拉数据 */
      configOption: [],
      logShow: false,
      curItem: {},
      jinjianShow: false,
      loading: false,
      backModal: false,
      contractModal: false,
      moneyModal: false
    }
  },
  created() {
    // this.getConfig()
  },
  methods: {
    addSuccess() {
      this.drawer = false
      this.checkInfoModal = false
      this.$refs.TableList?.requestData()
    },
    //
    async handleUpdate(row) {
      this.drawer = true
      this.detailValue = row
    },
    // 产品列表
    getProductList() {
      request({ url: 'system/product/list', method: 'get', params: { pageNum: 1, pageSize: 1000 }}).then(res => {
        console.log(res)
      })
    },
    // 审核信息
    async cheekInfo(row) {
      this.checkInfoModal = true
      const index = this.configList.findIndex(item => item.approvalLevel == row.examineOrder)

      const next = this.configList[index + 1]

      this.chooseItem = {
        id: row.id,
        process: row.approvalNode,
        level: next.approvalLevel,
        nextProcess: next ? next.approvalNode : '无'
      }
    },
    // 获取申请配置列表
    getConfig() {
      return request({ url: 'system/approveConfig/list', method: 'get', params: { pageNum: 1, pageSize: 1000 }})
    },

    listRequest(param) {
      this.loading = true
      Promise.all([
        request({ url: 'system/approveConfig/list', method: 'get', params: { pageNum: 1, pageSize: 1000 }}),
        request({ url: 'system/apply/list', method: 'get', params: param })
      ]).then(([d1, d2]) => {
        this.configList = d1.data
        this.configOption = d1.data.map(item => ({ label: item.approvalNode, value: item.approvalLevel }))
        this.tableData = d2.rows.map(item => {
          return {
            ...item,
            idCardPhoto: item.idCardImges?.split(',') || [],
            approvalNode: d1.data.find(sIt => sIt.approvalLevel == item.examineOrder)?.approvalNode
          }
        })
        // console.log(this.tableData)
      }).finally(() => {
        this.loading = false
      })
    },
    onShowModal(key, value) {
      this[key] = true
      this.curItem = value
    },
    modelClose(key) {
      this[key] = false
    },
    checkLog(row) {
      this.logShow = true
      this.logItem = row
    },
    showJinjianInfo(item) {
      this.jinjianShow = true
      this.jinjianItem = item
    },
    showBackCard(item) {
      this.backModal = true
      this.backItem = item
    },
    showContract(item) {
      this.contractModal = true
      this.contractItem = item
    }
  }

}
</script>
